<template>
  <el-drawer
      title="富文本"
      :with-header="false"
      :visible.sync="visible"
      custom-class="layer_wrap drawer_source"
      :before-close="()=>handleClose()"
  >
    <div class="layer_inside">
      <div class="layer_header">
        <span class="title">素材选择</span>
      </div>
      <div class="layer_content">
        <div class="content-area flex-box">
          <div class="left flex-box-left">
            <ResourceInfo
                :info="info"
                ref="sourceInfo"
                @backContent="backContent"
            />
          </div>
          <div class="right flex-box-right" v-if="true">
            <div class="item-wrap header-area">
              <div class="item name">素材名称</div>
              <div class="item">大小</div>
              <div class="item operator">操作</div>
            </div>
            <div class="list-area">
              <Draggable
                  class="list-group"
                  :list="tempContent"
                  :animation="100"
              >
                <template v-for="(item,index) in tempContent">
                  <div class="item-wrap">
                    <div class="item name">{{ item.name }}</div>
                    <div class="item">{{ fileSizeChange(item.size) }}</div>
                    <div class="item operator-box">
                      <div class="operator-item">
                        <i class="el-icon-delete" @click.prevent="handleDelete(item,index)"></i>
                      </div>
                      <div class="operator-item">
                        <i class="el-icon-thumb"></i>
                      </div>
                    </div>
                  </div>
                </template>
              </Draggable>
            </div>
          </div>
        </div>
      </div>
      <!--按钮-->
      <div class="footer-area">
        <el-button class="button_item cancel" @click="()=>handleClose()">取消</el-button>
        <el-button class="button_item sure" type="primary" @click="()=>handleSure()">确认</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import Draggable from "vuedraggable"
import ResourceInfo from "@c/public/layer/template/resourceInfo";
import {fileSizeChange} from "@/utils/common";

export default {
  name: 'UpdateVideo',

  props: ["visible", 'info'],

  components: {
    Draggable,
    ResourceInfo,
  },

  data() {
    return {
      content: null,
      tempContent: null,
    }
  },

  async mounted() {
  },

  methods: {
    // 外部引入函数
    fileSizeChange,

    // 接收回传的内容
    backContent(val) {
      let tempArr = [...this.tempContent, ...val]
      this.tempContent = this.$lodash.uniqBy(tempArr, 'id');
    },

    // 关闭弹层
    handleClose() {
      this.$emit('handleCancel')
    },

    // 点击确定
    handleSure() {
      const self = this;
      if ((this.tempContent)) {
        let params = Object();
        Reflect.set(params, 'key', (self.info.updataType));
        Reflect.set(params, 'val', (self.tempContent));
        this.$emit('handleSure', params);
        this.handleClose();
      } else {
        this.$message({
          message: '请先选择视频',
          type: "warning"
        })
      }
    },

    // 移除操作
    handleDelete(row, key) {
      let temp = this.tempContent.filter((item, index) => {
        return index !== key
      });
      this.$refs['sourceInfo'].handleCancelChecked(row);
      this.tempContent = temp;
    }
  },

  watch: {
    // 写入文本域内容
    info: {
      handler: async function (val) {
        if (!!val && !(this.$lodash.isEmpty(val))) {
          this.content = (val.content);
          this.tempContent = (val.content);
        }
      },
      deep: true,
      immediate: true,
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/assets/style/layer";
@import "assets/style";
</style>